<template>
    <Modal v-model="modal" title="编辑渠道" @on-cancel="canceledit">
        <Select v-model="params.project_id" v-width="200" placeholder="请选择项目" @on-change="getchannel">
            <Option :value="item.value" v-for="item in projectList" :key="item.value">{{ item.label }}</Option>
        </Select>
        <template v-if="bool">
            <div v-for="(item, index) in data[params.project_id]" class="ivu-mb-8 ivu-mt-8" :key="index">
                <div>
                    <Checkbox :disabled="item.disabel"
                        :indeterminate="item.indeterminate"
                        :value="item.selected"
                        @click.prevent.native="handleCheckAll(item)">{{item.source_name}}</Checkbox>
                </div>
                <CheckboxGroup v-model="item.checkAllGroup" @on-change="checkAllGroupChange(item)">
                    <Checkbox :disabled="items.disabel" :label="items.id" v-for="(items, indexs) in item.children" :key="indexs">{{items.source_name}}</Checkbox>
                </CheckboxGroup>
            </div>
        </template>
        <div slot='footer'>
            <Button @click="canceledit">取消</Button>
            <Button @click="submitedit" type='primary'>确认</Button>
        </div>
    </Modal>
</template>

<script>
    import { netsettingchannellist, netsettingbindchannel, netsettingprojectlist } from '@/api/hqapi';
    export default {
        name: 'Channel',
        data () {
            return {
                modal: false,
                params: { id: '', channel_id: '', project_id: '' },
                data: {},
                indeterminate: false,
                checkAll: false,
                checkAllGroup: [],
                projectList: [],
                bool: true,
                timer: null
            };
        },
        methods: {
            initial (row) {
                this.params.id = row.id
                netsettingprojectlist({ id: row.id }).then(res => {
                    this.projectList = res.filter(item => item.selected === true)
                    this.params.project_id = this.projectList[0] ? this.projectList[0].value : ''
                    this.getchannel()
                })
            },
            getchannel () {
                clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    if (!this.data[this.params.project_id]) {
                        this.bool = false
                        netsettingchannellist({ id: this.params.id, project_id: this.params.project_id }).then(res => {
                            for (let item of res) {
                                for (let items of item.children) {
                                    if (items.disabel) item.disabel = true
                                }
                            }
                            this.$set(this.data, `${this.params.project_id}`, res);
                            this.bool = true
                            this.modal = true
                        })
                    }
                }, 100)
            },
            handleCheckAll (item) {
                console.log(item)
                if (item.indeterminate) {
                    item.selected = false;
                } else {
                    item.selected = !item.selected;
                }
                item.indeterminate = false;

                if (item.selected) {
                    item.checkAllGroup = [];
                    item.children.forEach(items => {
                        item.checkAllGroup.push(items.id)
                    });
                } else {
                    item.checkAllGroup = [];
                }
                this.$forceUpdate()
            },
            checkAllGroupChange (item) {
                if (item.checkAllGroup.length === item.children.length) {
                    item.indeterminate = false;
                    item.selected = true;
                } else if (item.checkAllGroup.length > 0) {
                    item.indeterminate = true;
                    item.selected = false;
                } else {
                    item.indeterminate = false;
                    item.selected = false;
                }
            },
            canceledit () {
                this.data = {}
                this.modal = false
            },
            submitedit () {
                let data = Object.keys(this.data)
                if (data.length > 0) {
                    let datas = { id: this.params.id }
                    data.forEach(item => {
                        this.$set(datas, `${item}`, '');
                        let channel_id = []
                        this.data[item].forEach(items => {
                            channel_id.push(...items.checkAllGroup)
                        })
                        datas[item] = channel_id.join(',')
                    })
                    netsettingbindchannel(datas).then(res => {
                        this.$Message.success('绑定渠道成功');
                        this.$emit('askData');
                        this.data = {}
                        this.modal = false
                    })
                } else { this.$Message.error('请选择项目') }
            }
        }
    };
</script>

<style lang="scss" scoped>

</style>
